<template>
    <div class="menuContainer">
        <el-menu 
            class="el-menu-vertical-demo" 
            theme="dark" 
            unique-opened
            router 
            ref="menu"
            :default-active="this.$route.path"
            background-color="#001529"
            text-color="#ffffff"
            :collapse="isCollapse"
            active-text-color="#3C79F6"
            @open="handleOpen"
            @close="handleClose"
            >
            <!-- <el-menu-item class="logoBox">
				<img src="~_assets/logo.png" >
				<span slot="title">特瓦特管理平台</span>
			</el-menu-item> -->
            <el-submenu 
              v-for="(first,index) in firstMenu" 
                :key="first.id +''" 
                :index="first.id +''"
                class="firstMenu"
                :data-item="JSON.stringify(first)"
                >
                <template slot="title">
                    <i :class="first.iconName"></i>
					<span v-text="first.resourceName"></span>
                </template>
                <template  v-for="child in childMenu">
                   
                        <el-submenu  v-if=" childMenu.length > 0 && child.isParent== 'true'"
                            :key="child.id+''" 
                            :index="child.id+''" 
                            class="childMenu"
                            :data-item="JSON.stringify(child)"
                        >
                            <template slot="title">
                                <i :class="child.iconName"></i>
                                <span v-text="child.resourceName"></span>
                            </template>
                            <template>
                                <div v-if=" thirdMenu.length > 0 && child.id == thirdMenu[0].pid">
                                    <el-menu-item 
                                        v-for="thild in thirdMenu" 
                                        :key="thild.id+''"
                                        :index="thild.id+''"
                                        v-text="thild.resourceName"
                                        :data-id="thild.id"
                                        :route="thild.resourceUrl+''" 
                                        class="addTab" @click="getMenuId(JSON.stringify(thild.id))"
                                    ></el-menu-item>
                                </div>
                            </template>   
                               
                        </el-submenu>

                        <el-menu-item 
                            v-else 
                            :key="child.id+''" 
                            :index="child.id+''" 
                            :data-id="child.id"
                            :route="child.resourceUrl+''" 
                            class="addTab" @click="getMenuId(JSON.stringify(child.id))"
                        >
                             <template slot="title">
                                <i :class="child.iconName"></i>
                                <span v-text="child.resourceName"></span>
                            </template>
                        </el-menu-item>
                </template>
            </el-submenu>



		</el-menu>
    </div>
</template>
<script>
import Bus from '@/bus.js'
import { FIND_TREE_BY_PID } from '_config/url'

export default {
    props:{
        foldMenu:{
            type:Boolean,
            // required:true,
        }
    },
    data(){
        return {
            firstMenu:[],
            childMenu:[],
            thirdMenu:[]
        }
    },
    created(){
        this.getFirstNode()
        Bus.$off('initMenu')
        Bus.$on('initMenu',() =>{
            that.initMenu()
        })
    },
    methods:{
         handleOpen(key, keyPath) {
                console.log(key, keyPath);
         },
        handleClose(key, keyPath) {
                console.log(key, keyPath);
         },



        addTab(e){
            let item = {
                text: $(e)[0].currentTarget.innerText,
                mid: $(e)[0].currentTarget.dataset.id
            }
            e.stopPropagation()
            Bus.$emit('addTab',item)
        },
        //获取本项目的二级菜单和其它项目的一级菜单
        getFirstNode(){
            this.firstMenu = JSON.parse(localStorage.getItem('systemList')) 
            //判断isParent,显示是否有下级标
            this.initMenu()
        },
        initMenu(){
            this.$nextTick(()=>{
                let doms = $('.firstMenu.el-submenu')
                for(let i = 0;i<doms.length;i++){
                    let item = JSON.parse($(doms[i])[0].dataset.item)
                    if(item.isParent == 'false'){
                        $(doms[i]).find('.el-submenu__icon-arrow').remove()
                    }
                }
            })
        },
        //判断类型是跳转还是获取下级菜单
        getMenu(e){
            e.stopPropagation()
            this.childMenu = []
            let item = JSON.parse($(e.currentTarget)[0].dataset.item)
            if(localStorage.getItem('firseMenuId') != item.id){//跳转
                localStorage.setItem('firseMenuId', item.id)
                this.selectPlate(item.resourceUrl)
            }else{//获取下级菜单
                this.getSecMenu(item.id) 
            }
        },

         //判断类型是跳转还是获取下级菜单
        getChildMenu(e){
            e.stopPropagation()
            this.thirdMenu = []
            let item = JSON.parse($(e.currentTarget)[0].dataset.item)
            // if(item.id == item.topId){//跳转
            //     this.selectPlate(item.resourceUrl)
            // }else{//获取下级菜单
                this.getThirdMenu(item.id) 
            // }
        },

        
        //跳转
        selectPlate(url){
            localStorage.setItem('needFresh', 1)
            let a = document.createElement('a')
            a.href = location.protocol + '//'+location.host + url
            a.click()
        },
        //获取子菜单
        getSecMenu(id){
            this.$postsso(FIND_TREE_BY_PID,{
                pid:id
            })
                .then(res => {
                    if(res.status == 1){
                        this.childMenu = res.msg
                    }
                })
                .catch(err => {
                    console.log(err)
                })
        },

            //获取子菜单
        getThirdMenu(id){
            this.$postsso(FIND_TREE_BY_PID,{
                pid:id
            })
                .then(res => {
                    if(res.status == 1){
                        this.thirdMenu = res.msg
                    }
                })
                .catch(err => {
                    console.log(err)
                })
        },





        getMenuId(id){//当前菜单id
            localStorage.setItem('getMenuId',id);
        }
    },
    computed:{
        isCollapse(){
            return this.foldMenu
        },
    },
    mounted(){
        $('.menuContainer').on('click','.firstMenu',this.getMenu)
         $('.menuContainer').on('click','.childMenu',this.getChildMenu)
        $('.menuContainer').on('click','.addTab',this.addTab)
    },
    watch:{
        isCollapse(val){
            if(this.foldMenu){
                $('.el-submenu').css('flex-direction','center')
            }else{
                $('.el-submenu').css('flex-direction','flex-start')
            }
        }
    }
}
</script>
<style lang="less">
@import url(~_config/mixin.less);
.menuContainer{
    // .wh(220px,100vh);
    height:100vh;
    background-color: #001529;
    .logoBox{
        font-size: 20px;
        color: #fff !important;
        img{
            margin-right: 0.5vw;
        }
        span{
            letter-spacing: 2px;
            font-size: 18.5px;
        }
    }
    .el-submenu__title i{
        color:#fff;
    }
    .el-submenu__title i:first-child{
        margin-right: 10%;
    }
    .el-menu-item:focus,
    .el-menu-item:hover,
    .el-submenu__title:focus,
    .el-submenu__title:hover{
        color:#3C79F6 !important;
    }
    .el-tooltip{
        left: -19% !important;
    }
    .el-menu-item{
        background-color: #242A37 !important;
    }
    .el-menu--vertical{
        display: none !important;
    }
}
</style>
